<template>
  <div class="login-container">
    <!-- 左侧装饰区域 -->
    <div class="left-section">
      <div class="brand-content">
        <div class="logo-container">
          <div class="logo-circle">
            <h1 class="app-title">趣享生活</h1>
          </div>
        </div>
        <p class="brand-slogan">发现美好，分享生活</p>
        <div class="qr-section">
          <div class="qr-placeholder">
            <div id="dingtalk-login-container" class="qr-code"></div>
          </div>
          <p class="qr-text">请使用 <span class="dingtalk-icon">钉钉</span> 扫描二维码登录 <span class="refresh-icon">🔄</span></p>
          <button @click="reloadDingTalkLogin" class="dingtalk-retry-btn">重新加载钉钉登录</button>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="right-section">
      <div class="login-form">
        <!-- 登录方式选项卡 -->
        <div class="login-tabs">
          <button 
            @click="switchLoginMode('phone')" 
            :class="['tab-button', { 'active': loginMode === 'phone' }]"
          >
            手机号登录
          </button>
          <button 
            @click="switchLoginMode('username')" 
            :class="['tab-button', { 'active': loginMode === 'username' }]"
          >
            账号密码登录
          </button>
        </div>
        
        <h2 class="form-title">{{ loginMode === 'phone' ? '手机号登录' : '账号密码登录' }}</h2>
        
        <!-- 手机号登录表单 -->
        <div v-if="loginMode === 'phone'" class="phone-login-form">
          <div class="input-group">
            <div class="input-wrapper">
              <span class="country-code">+86</span>
              <input
                v-model="phone"
                type="tel"
                class="phone-input"
                placeholder="输入手机号"
                maxlength="11"
                :class="{ 'error': phoneError }"
                @input="validatePhone"
                @blur="validatePhone"
              />
            </div>
            <div v-if="phoneError" class="error-message">{{ phoneError }}</div>
          </div>

          <div class="input-group">
            <div class="input-wrapper">
              <input
                v-model="code"
                type="text"
                class="code-input"
                placeholder="输入验证码"
                maxlength="6"
                :class="{ 'error': codeError }"
                @input="validateCode"
              />
              <button
                class="send-code-btn"
                :disabled="!canSendCode || isSendingCode"
                @click="sendCode"
              >
                {{ sendCodeText }}
              </button>
            </div>
            <div v-if="codeError" class="error-message">{{ codeError }}</div>
          </div>
        </div>

        <!-- 账号密码登录表单 -->
        <div v-if="loginMode === 'username'" class="username-login-form">
          <div class="input-group">
            <div class="input-wrapper">
              <input
                v-model="username"
                type="text"
                class="username-input"
                placeholder="输入用户名"
                :class="{ 'error': usernameError }"
                @input="validateUsername"
                @blur="validateUsername"
              />
            </div>
            <div v-if="usernameError" class="error-message">{{ usernameError }}</div>
          </div>

          <div class="input-group">
            <div class="input-wrapper">
              <input
                v-model="password"
                type="password"
                class="password-input"
                placeholder="输入密码"
                :class="{ 'error': passwordError }"
                @input="validatePassword"
                @blur="validatePassword"
              />
            </div>
            <div v-if="passwordError" class="error-message">{{ passwordError }}</div>
          </div>

          <div class="register-link">
            <span>还没有账号？</span>
            <a @click="showRegisterForm = true" class="register-btn">立即注册</a>
          </div>
        </div>

        <button
          class="login-btn"
          :disabled="!canLogin || isLoggingIn"
          @click="login"
          :title="!agreeToTerms ? '请先同意用户协议' : ''"
        >
          <span v-if="isLoggingIn" class="loading-spinner"></span>
          {{ isLoggingIn ? '登录中...' : (!agreeToTerms ? '请先同意用户协议' : '登录') }}
        </button>

        <div class="agreement">
          <label class="checkbox-wrapper" :class="{ 'error': !agreeToTerms && (phone.value || username.value) }">
            <input 
              type="checkbox" 
              class="checkbox" 
              v-model="agreeToTerms"
            />
            <span class="checkbox-text">
              我已阅读并同意
              <a href="#" class="link">《用户协议》</a>
              <a href="#" class="link">《隐私政策》</a>
              <a href="#" class="link">《儿童/青少年个人信息保护规则》</a>
            </span>
          </label>
          <div v-if="!agreeToTerms && (phone.value || username.value)" class="agreement-error">
            请先同意用户协议才能登录
          </div>
        </div>

        <div class="new-user-tip">
          <a href="#" class="link">新用户可直接登录</a>
        </div>
      </div>
    </div>

    <!-- 注册表单模态框 -->
    <div v-if="showRegisterForm" class="modal-overlay" @click="closeRegisterForm">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>用户注册</h3>
          <button @click="closeRegisterForm" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <div class="input-wrapper">
              <input
                v-model="registerForm.username"
                type="text"
                class="username-input"
                placeholder="输入用户名"
                :class="{ 'error': registerForm.usernameError }"
                @input="validateRegisterUsername"
                @blur="validateRegisterUsername"
              />
            </div>
            <div v-if="registerForm.usernameError" class="error-message">{{ registerForm.usernameError }}</div>
          </div>

          <div class="input-group">
            <div class="input-wrapper">
              <input
                v-model="registerForm.password"
                type="password"
                class="password-input"
                placeholder="输入密码"
                :class="{ 'error': registerForm.passwordError }"
                @input="validateRegisterPassword"
                @blur="validateRegisterPassword"
              />
            </div>
            <div v-if="registerForm.passwordError" class="error-message">{{ registerForm.passwordError }}</div>
          </div>

          <div class="input-group">
            <div class="input-wrapper">
              <input
                v-model="registerForm.nickname"
                type="text"
                class="nickname-input"
                placeholder="输入昵称"
                :class="{ 'error': registerForm.nicknameError }"
                @input="validateRegisterNickname"
                @blur="validateRegisterNickname"
              />
            </div>
            <div v-if="registerForm.nicknameError" class="error-message">{{ registerForm.nicknameError }}</div>
          </div>

          <button
            class="register-submit-btn"
            :disabled="!canRegister || isRegistering"
            @click="register"
          >
            <span v-if="isRegistering" class="loading-spinner"></span>
            {{ isRegistering ? '注册中...' : '立即注册' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

// 响应式数据
const phone = ref('')
const code = ref('')
const phoneError = ref('')
const codeError = ref('')
const isSendingCode = ref(false)
const isLoggingIn = ref(false)
const countdown = ref(0)
const countdownTimer = ref(null)

// 登录模式切换
const loginMode = ref('phone') // 'phone' 或 'username'

// 账号密码登录相关
const username = ref('')
const password = ref('')
const usernameError = ref('')
const passwordError = ref('')

// 注册表单相关
const showRegisterForm = ref(false)
const isRegistering = ref(false)
const registerForm = ref({
  username: '',
  password: '',
  nickname: '',
  usernameError: '',
  passwordError: '',
  nicknameError: ''
})

// 用户协议同意状态
const agreeToTerms = ref(false)

// 正则校验
const phoneRegex = /^1[3-9]\d{9}$/
const codeRegex = /^\d{6}$/
const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/
const passwordMinLength = 6

// 计算属性
const canSendCode = computed(() => {
  return phoneRegex.test(phone.value) && countdown.value === 0 && !isSendingCode.value
})

const canLogin = computed(() => {
  const basicValidation = !isLoggingIn.value && agreeToTerms.value
  
  if (loginMode.value === 'phone') {
    return basicValidation && phoneRegex.test(phone.value) && codeRegex.test(code.value)
  } else {
    return basicValidation && usernameRegex.test(username.value) && password.value.length >= passwordMinLength
  }
})

const canRegister = computed(() => {
  return usernameRegex.test(registerForm.value.username) && 
         registerForm.value.password.length >= passwordMinLength && 
         registerForm.value.nickname.length >= 2 && 
         !isRegistering.value
})

const sendCodeText = computed(() => {
  if (isSendingCode.value) return '发送中...'
  if (countdown.value > 0) return `${countdown.value}s后重试`
  return '获取验证码'
})

// 手机号校验
const validatePhone = () => {
  if (!phone.value) {
    phoneError.value = ''
    return
  }
  
  if (!phoneRegex.test(phone.value)) {
    phoneError.value = '请输入正确手机号'
  } else {
    phoneError.value = ''
  }
}

// 验证码校验
const validateCode = () => {
  if (!code.value) {
    codeError.value = ''
    return
  }
  
  if (!codeRegex.test(code.value)) {
    codeError.value = '请输入6位数字验证码'
  } else {
    codeError.value = ''
  }
}

// 用户名校验
const validateUsername = () => {
  if (!username.value) {
    usernameError.value = ''
    return
  }
  
  if (!usernameRegex.test(username.value)) {
    usernameError.value = '用户名长度应在3-20个字符之间，只能包含字母、数字和下划线'
  } else {
    usernameError.value = ''
  }
}

// 密码校验
const validatePassword = () => {
  if (!password.value) {
    passwordError.value = ''
    return
  }
  
  if (password.value.length < passwordMinLength) {
    passwordError.value = '密码长度至少6位'
  } else {
    passwordError.value = ''
  }
}

// 注册表单验证
const validateRegisterUsername = () => {
  if (!registerForm.value.username) {
    registerForm.value.usernameError = ''
    return
  }
  
  if (!usernameRegex.test(registerForm.value.username)) {
    registerForm.value.usernameError = '用户名长度应在3-20个字符之间，只能包含字母、数字和下划线'
  } else {
    registerForm.value.usernameError = ''
  }
}

const validateRegisterPassword = () => {
  if (!registerForm.value.password) {
    registerForm.value.passwordError = ''
    return
  }
  
  if (registerForm.value.password.length < passwordMinLength) {
    registerForm.value.passwordError = '密码长度至少6位'
  } else {
    registerForm.value.passwordError = ''
  }
}

const validateRegisterNickname = () => {
  if (!registerForm.value.nickname) {
    registerForm.value.nicknameError = ''
    return
  }
  
  if (registerForm.value.nickname.length < 2 || registerForm.value.nickname.length > 20) {
    registerForm.value.nicknameError = '昵称长度应在2-20个字符之间'
  } else {
    registerForm.value.nicknameError = ''
  }
}

// 登录模式切换
const switchLoginMode = (mode) => {
  loginMode.value = mode
  // 清空表单和错误信息
  phone.value = ''
  code.value = ''
  username.value = ''
  password.value = ''
  phoneError.value = ''
  codeError.value = ''
  usernameError.value = ''
  passwordError.value = ''
  // 重置用户协议状态
  agreeToTerms.value = false
}

// 发送验证码
const sendCode = async () => {
  if (!canSendCode.value) return
  
  isSendingCode.value = true
  
  try {
    const response = await axios.post('/api/auth/send-code', {
      phone: phone.value
    })
    
    if (response.data.success) {
      // 开始倒计时
      startCountdown()
      // 可以添加成功提示
      console.log('验证码发送成功')
    } else {
      codeError.value = response.data.message || '验证码发送失败'
    }
  } catch (error) {
    console.error('发送验证码失败:', error)
    codeError.value = error.response?.data?.message || '网络错误，请重试'
  } finally {
    isSendingCode.value = false
  }
}

// 开始倒计时
const startCountdown = () => {
  countdown.value = 60
  countdownTimer.value = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(countdownTimer.value)
      countdownTimer.value = null
    }
  }, 1000)
}

// 登录
const login = async () => {
  if (!canLogin.value) return
  
  // 检查用户协议是否同意
  if (!agreeToTerms.value) {
    if (loginMode.value === 'phone') {
      codeError.value = '请先同意用户协议'
    } else {
      passwordError.value = '请先同意用户协议'
    }
    return
  }
  
  isLoggingIn.value = true
  
  try {
    let response
    
    if (loginMode.value === 'phone') {
      // 手机号验证码登录
      response = await axios.post('/api/auth/login', {
        phone: phone.value,
        code: code.value
      })
      
      if (response.data.success) {
        // 存储Token
        localStorage.setItem('token', response.data.token)
        localStorage.setItem('user', JSON.stringify(response.data.user))
        
        // 跳转到首页
        router.push('/home')
      } else {
        codeError.value = response.data.message || '登录失败'
      }
    } else {
      // 账号密码登录
      response = await axios.post('/api/auth/username-login', {
        username: username.value,
        password: password.value
      })
      
      if (response.data.success) {
        // 存储Token
        localStorage.setItem('token', response.data.token)
        localStorage.setItem('user', JSON.stringify(response.data.user))
        
        // 跳转到首页
        router.push('/home')
      } else {
        passwordError.value = response.data.message || '登录失败'
      }
    }
  } catch (error) {
    console.error('登录失败:', error)
    const errorMessage = error.response?.data?.message || '网络错误，请重试'
    
    if (loginMode.value === 'phone') {
      codeError.value = errorMessage
    } else {
      passwordError.value = errorMessage
    }
  } finally {
    isLoggingIn.value = false
  }
}

// 注册相关函数
const closeRegisterForm = () => {
  showRegisterForm.value = false
  // 清空注册表单
  registerForm.value = {
    username: '',
    password: '',
    nickname: '',
    usernameError: '',
    passwordError: '',
    nicknameError: ''
  }
}

const register = async () => {
  if (!canRegister.value) return
  
  isRegistering.value = true
  
  try {
    const response = await axios.post('/api/auth/register', {
      username: registerForm.value.username,
      password: registerForm.value.password,
      nickname: registerForm.value.nickname
    })
    
    if (response.data.success) {
      // 存储Token
      localStorage.setItem('token', response.data.token)
      localStorage.setItem('user', JSON.stringify(response.data.user))
      
      // 关闭注册表单
      closeRegisterForm()
      
      // 跳转到首页
      router.push('/')
    } else {
      // 显示错误信息
      if (response.data.message.includes('用户名')) {
        registerForm.value.usernameError = response.data.message
      } else {
        registerForm.value.passwordError = response.data.message
      }
    }
  } catch (error) {
    console.error('注册失败:', error)
    const errorMessage = error.response?.data?.message || '网络错误，请重试'
    registerForm.value.usernameError = errorMessage
  } finally {
    isRegistering.value = false
  }
}

// 钉钉登录配置
const DINGTALK_CONFIG = {
  clientId: 'dingo4krui9hjj8ab1og', // 您的Client ID
  redirectUri: encodeURIComponent('http://localhost:5177/dingtalk/callback'), // 回调地址
}

// 动态加载钉钉SDK
const loadDingTalkSDK = () => {
  return new Promise((resolve, reject) => {
    // 检查是否已经加载
    if (typeof DDLogin !== 'undefined') {
      resolve(true)
      return
    }
    
    // 创建script标签动态加载SDK
    const script = document.createElement('script')
    script.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js'
    script.async = true
    
    script.onload = () => {
      console.log('钉钉SDK加载成功')
      resolve(true)
    }
    
    script.onerror = () => {
      console.error('钉钉SDK加载失败，尝试备用SDK')
      // 尝试备用SDK
      const backupScript = document.createElement('script')
      backupScript.src = 'https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js'
      backupScript.async = true
      
      backupScript.onload = () => {
        console.log('备用钉钉SDK加载成功')
        resolve(true)
      }
      
      backupScript.onerror = () => {
        console.error('所有钉钉SDK都加载失败')
        reject(new Error('钉钉SDK加载失败'))
      }
      
      document.head.appendChild(backupScript)
    }
    
    document.head.appendChild(script)
  })
}

// 初始化钉钉扫码登录
const initDingTalkLogin = () => {
  console.log('开始初始化钉钉登录...')
  console.log('DDLogin 是否可用:', typeof DDLogin !== 'undefined')
  
  const container = document.getElementById('dingtalk-login-container')
  if (!container) {
    console.error('找不到钉钉登录容器')
    return
  }
  
  if (typeof DDLogin !== 'undefined') {
    try {
      // 构建正确的钉钉OAuth URL
      const appId = DINGTALK_CONFIG.clientId;
      const redirectUri = DINGTALK_CONFIG.redirectUri;
      const state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
      
      const goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appId}&response_type=code&scope=snsapi_login&state=${state}&redirect_uri=${redirectUri}`)
      
      console.log('钉钉登录配置:', {
        clientId: DINGTALK_CONFIG.clientId,
        redirectUri: DINGTALK_CONFIG.redirectUri,
        goto: goto
      })
      
      // 显示加载状态
      container.innerHTML = '<div class="loading-placeholder">正在生成钉钉登录二维码...</div>'
      
      const obj = DDLogin({
        id: "dingtalk-login-container",
        goto: goto,
        style: "border:none; background-color:#FFFFFF; width:100%; height:100%;",
        width: 280,
        height: 280
      })
      
      console.log('钉钉登录对象创建成功:', obj)
      
      // 等待iframe加载完成
      setTimeout(() => {
        const iframe = container.querySelector('iframe')
        if (iframe) {
          console.log('钉钉登录iframe已创建')
          iframe.style.width = '100%'
          iframe.style.height = '100%'
          iframe.style.border = 'none'
          iframe.style.borderRadius = '8px'
          iframe.style.background = '#fff'
          iframe.style.display = 'block'
          iframe.style.position = 'absolute'
          iframe.style.top = '0'
          iframe.style.left = '0'
        } else {
          console.warn('未找到钉钉登录iframe，显示错误提示')
          container.innerHTML = '<div class="error-placeholder">二维码生成失败<br><small>请点击重新加载</small></div>'
        }
      }, 2000)
      
      // 监听钉钉登录成功事件
      const handleMessage = (event) => {
        console.log('收到钉钉消息:', event)
        const origin = event.origin
        if (origin === "https://login.dingtalk.com") {
          const loginTmpCode = event.data
          console.log('钉钉登录成功，临时码:', loginTmpCode)
          // 处理登录成功逻辑
          handleDingTalkLogin(loginTmpCode)
        }
      }
      
      window.addEventListener('message', handleMessage)
      
      // 存储事件监听器引用，用于清理
      window._dingtalkMessageHandler = handleMessage
    } catch (error) {
      console.error('钉钉登录初始化失败:', error)
      container.innerHTML = '<div style="color: #ff2442; text-align: center; padding: 20px;">钉钉登录初始化失败</div>'
    }
  } else {
    console.error('DDLogin SDK 未加载')
    container.innerHTML = '<div style="color: #ff2442; text-align: center; padding: 20px;">钉钉登录暂时不可用</div>'
  }
}

// 处理钉钉登录成功
const handleDingTalkLogin = async (loginTmpCode) => {
  try {
    // 调用后端API处理钉钉登录
    const response = await axios.post('/api/auth/dingtalk-login', {
      code: loginTmpCode
    })
    
    if (response.data.success) {
      // 存储Token
      localStorage.setItem('token', response.data.token)
      localStorage.setItem('user', JSON.stringify(response.data.user))
      
      // 跳转到首页
      router.push('/')
    }
  } catch (error) {
    console.error('钉钉登录失败:', error)
    codeError.value = '钉钉登录失败，请重试'
  }
}

// 重新加载钉钉登录
const reloadDingTalkLogin = async () => {
  console.log('重新加载钉钉登录...')
  const container = document.getElementById('dingtalk-login-container')
  if (container) {
    container.innerHTML = '<div style="color: #999; text-align: center; padding: 20px;">正在重新加载钉钉登录...</div>'
  }
  
  try {
    await loadDingTalkSDK()
    initDingTalkLogin()
  } catch (error) {
    console.error('重新加载钉钉登录失败:', error)
    if (container) {
      container.innerHTML = '<div style="color: #ff2442; text-align: center; padding: 20px;">钉钉登录加载失败<br><small>请检查网络连接</small></div>'
    }
  }
}

// 组件挂载时初始化钉钉登录
onMounted(async () => {
  // 不在组件内检查token，让路由守卫来处理
  // 这样可以避免重复跳转
  try {
    // 动态加载钉钉SDK
    console.log('开始加载钉钉SDK...')
    await loadDingTalkSDK()
    console.log('钉钉SDK加载完成，开始初始化')
    initDingTalkLogin()
  } catch (error) {
    console.error('钉钉SDK加载失败:', error)
    // 显示错误提示
    const container = document.getElementById('dingtalk-login-container')
    if (container) {
      container.innerHTML = '<div style="color: #ff2442; text-align: center; padding: 20px;">钉钉登录暂时不可用<br><small>请检查网络连接</small></div>'
    }
  }
})

// 组件卸载时清理定时器和事件监听器
onUnmounted(() => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
  
  // 清理钉钉消息监听器
  if (window._dingtalkMessageHandler) {
    window.removeEventListener('message', window._dingtalkMessageHandler)
    delete window._dingtalkMessageHandler
  }
})
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  background: #000;
  display: flex;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 左侧装饰区域 */
.left-section {
  flex: 1;
  background: linear-gradient(135deg, #ff2442 0%, #ff6b6b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.left-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.3;
}

.brand-content {
  text-align: center;
  z-index: 1;
  position: relative;
}

.logo-container {
  margin-bottom: 40px;
}

.logo-circle {
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.app-title {
  font-size: 24px;
  font-weight: bold;
  color: #ff2442;
  margin: 0;
  letter-spacing: 1px;
}

.brand-slogan {
  font-size: 18px;
  color: #fff;
  margin: 0 0 40px 0;
  font-weight: 300;
  opacity: 0.9;
}

.qr-section {
  margin-top: 40px;
}

.qr-placeholder {
  width: 280px;
  height: 280px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.qr-code {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  position: relative;
  display: block;
}

/* 钉钉SDK生成的iframe样式 */
.qr-code iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 8px;
  background: #fff;
  display: block;
}

/* 加载状态样式 */
.qr-code .loading-placeholder {
  color: #999;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

/* 错误状态样式 */
.qr-code .error-placeholder {
  color: #ff2442;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.qr-text {
  color: #fff;
  font-size: 14px;
  margin: 0;
  opacity: 0.8;
}

.app-icon, .dingtalk-icon {
  color: #fff;
  font-weight: 500;
}

.dingtalk-icon {
  color: #00d4aa; /* 钉钉绿色 */
}

.refresh-icon {
  color: #fff;
  opacity: 0.7;
  font-size: 12px;
  margin-left: 5px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.refresh-icon:hover {
  opacity: 1;
}

.dingtalk-retry-btn {
  background: #00d4aa;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.dingtalk-retry-btn:hover {
  background: #00b894;
  transform: translateY(-1px);
}

/* 右侧登录表单区域 */
.right-section {
  flex: 1;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  height: 100vh;
}

.login-form {
  width: 100%;
  max-width: 400px;
  padding: 40px 80px 40px 60px;
  margin-left: 40px;
}

.form-title {
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 40px 0;
  text-align: center;
}

.input-group {
  margin-bottom: 24px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #2a2a2a;
  border-radius: 8px;
  border: 1px solid #3a3a3a;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #ff2442;
  box-shadow: 0 0 0 2px rgba(255, 36, 66, 0.2);
}

.country-code {
  padding: 0 16px;
  color: #999;
  font-size: 16px;
  border-right: 1px solid #3a3a3a;
  white-space: nowrap;
}

.phone-input, .code-input {
  flex: 1;
  height: 56px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 0 16px;
  outline: none;
}

.phone-input::placeholder, .code-input::placeholder {
  color: #666;
}

.phone-input.error, .code-input.error {
  color: #ff4757;
}

.send-code-btn {
  height: 40px;
  padding: 0 20px;
  background: #ff2442;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  margin-right: 8px;
}

.send-code-btn:hover:not(:disabled) {
  background: #e01e3c;
  transform: translateY(-1px);
}

.send-code-btn:disabled {
  background: #666;
  cursor: not-allowed;
  transform: none;
}

.login-btn {
  width: 100%;
  height: 56px;
  background: #ff2442;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 32px 0;
}

.login-btn:hover:not(:disabled) {
  background: #e01e3c;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 36, 66, 0.3);
}

.login-btn:disabled {
  background: #666;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-message {
  color: #ff4757;
  font-size: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.agreement {
  margin: 24px 0;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #ff2442;
}

.checkbox-text {
  color: #999;
  font-size: 12px;
  line-height: 1.4;
  flex: 1;
}

.link {
  color: #4a9eff;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

.new-user-tip {
  text-align: center;
  margin-top: 24px;
}

.new-user-tip .link {
  color: #4a9eff;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    height: 100vh;
    width: 100vw;
  }
  
  .left-section {
    height: 40vh;
    width: 100vw;
  }
  
  .right-section {
    height: 60vh;
    width: 100vw;
  }
  
  .logo-circle {
    width: 80px;
    height: 80px;
  }
  
  .app-title {
    font-size: 18px;
  }
  
  .brand-slogan {
    font-size: 16px;
  }
  
  .qr-placeholder {
    width: 200px;
    height: 200px;
  }
  
  .qr-code {
    width: 100%;
    height: 100%;
  }
  
  .login-form {
    padding: 20px;
    margin-left: 0;
    max-width: 100%;
  }
  
  .form-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .input-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  
  .country-code {
    border-right: none;
    border-bottom: 1px solid #3a3a3a;
    padding: 12px 16px;
  }
  
  .phone-input {
    padding: 12px 16px;
  }
  
  .send-code-btn {
    margin: 8px 0 0 0;
    width: 100%;
  }
}

/* 账号密码输入框样式 */
.username-input, .password-input, .nickname-input {
  flex: 1;
  padding: 16px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  outline: none;
  width: 100%;
}

.username-input::placeholder, .password-input::placeholder, .nickname-input::placeholder {
  color: #999;
}

.username-input.error, .password-input.error, .nickname-input.error {
  color: #ff2442;
}

/* 登录选项卡样式 */
.login-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 1px solid #333;
}

.tab-button {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  color: #999;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button.active {
  color: #ff2442;
  border-bottom-color: #ff2442;
}

.tab-button:hover {
  color: #fff;
}

/* 注册链接样式 */
.register-link {
  text-align: center;
  margin: 20px 0;
  color: #999;
  font-size: 14px;
}

.register-btn {
  color: #ff2442;
  text-decoration: none;
  cursor: pointer;
  margin-left: 5px;
}

.register-btn:hover {
  text-decoration: underline;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #2a2a2a;
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #333;
}

.modal-header h3 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #fff;
}

.modal-body {
  padding: 24px;
}

.register-submit-btn {
  width: 100%;
  height: 48px;
  background: #ff2442;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.register-submit-btn:hover:not(:disabled) {
  background: #e01e3c;
  transform: translateY(-1px);
}

.register-submit-btn:disabled {
  background: #666;
  cursor: not-allowed;
  transform: none;
}

/* 用户协议错误提示样式 */
.agreement-error {
  color: #ff2442;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

.checkbox-wrapper.error {
  border: 1px solid #ff2442;
  border-radius: 4px;
  padding: 8px;
  background: rgba(255, 36, 66, 0.1);
}
</style>
